<div data-ng-show="!book">
    <h3>Requested book not found</h3>
</div>

<div data-ng-show="book">
    <form class="form-vertical" role="form"
        data-editable-form name="editableForm"
        data-onaftersave="saveBook()"
    >
        <div class="row">
            <div class="col-lg-8">
                <h3>
                    <span style="width: 100%;"
                        data-editable-text="book.title"
                        data-e-name="book.title"
                        data-e-required
                    >
                        {{book.title}}
                    </span>

                    <span class="pull-right"
                        data-ng-show="!editableForm.$visible && user.admin"
                    >
                        <a href="#"
                           data-ng-click="editableForm.$show()"
                           data-tooltip="Toggle edit mode"
                        >
                            <i class="fa fa-wrench"></i>
                        </a>
                    </span>
                </h3>

                <p style="white-space: pre-line"
                   data-editable-textarea="book.description"
                   data-e-name="book.description"
                   data-e-class="editable-textarea"
                   data-e-required
                >
                    {{book.description}}
                </p>

                <div class="visible-lg">
                    <div data-ng-show="editableForm.$visible">
                        <button type="submit" class="btn btn-primary"
                            data-ng-disabled="editableForm.$waiting"
                        >
                            Save
                        </button>
                        <button type="button" class="btn btn-default"
                            data-ng-disabled="editableForm.$waiting"
                            data-ng-click="editableForm.$cancel()"
                        >
                            Cancel
                        </button>
                        <button type="button" class="btn btn-danger pull-right"
                            data-ng-bootbox-title="Danger - Danger - Danger"
                            data-ng-bootbox-custom-dialog="Are you sure about the <strong>{{book.title}}</strong> book delete?"
                            data-ng-bootbox-buttons="confirmButtonsDelete"
                        >
                            Delete
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <h4 class="text-muted">Information</h4>
                <table class="table">
                    <tr>
                        <th style="vertical-align: middle;">Author</th>
                        <td>
                            <a
                                data-ui-sref="examples.author({id: book.author.id})"
                                data-editable-select="selectAuthor"
                                data-onshow="loadAuthors()"
                                data-e-name="book.author"
                                data-e-required
                                data-e-ng-options="a.id as a.name for a in authors"
                            >
                                {{book.author.name}}
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <th>Released</th>
                        <td>
                            <div data-ng-show="!editableForm.$visible">
                                {{book.releaseDate | amDateFormat: 'YYYY'}}
                            </div>

                            <div data-ng-show="editableForm.$visible">
                                <datepicker
                                    data-ng-model="book.releaseDate"
                                    data-min-mode="year"
                                    data-datepicker-mode="'year'"
                                ></datepicker>
                            </div>
                        </td>
                    </tr>
                </table>

                <div class="hidden-lg">
                    <div data-ng-show="editableForm.$visible">
                        <button type="submit" class="btn btn-primary"
                            data-ng-disabled="editableForm.$waiting"
                        >
                            Save
                        </button>
                        <button type="button" class="btn btn-default"
                            data-ng-disabled="editableForm.$waiting"
                            data-ng-click="editableForm.$cancel()"
                        >
                            Cancel
                        </button>
                        <button type="button" class="btn btn-danger pull-right"
                            data-ng-bootbox-confirm="Are you sure about the book delete?"
                            data-ng-bootbox-confirm-action="deleteBook()"
                        >
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>